<template>
  <div class="inventory-detail">
    <div class="detail-title">
      <el-divider direction="vertical"></el-divider>
      <span>基本信息</span>
    </div>
    <el-row class="no-row-span">
      <el-col :span="6">盘点单号：{{inventoryNo}}</el-col>
      <el-col :span="6">生成时间：{{createTime}}</el-col>
      <el-col :span="6">盘点人：{{createUserName}}</el-col>
      <el-col :span="6">盈亏数量：{{profitLossNum}}</el-col>
    </el-row>
    <el-row>
      <el-col :span="6">盈亏成本金额(元)：{{formatMoney(profitLossPrincipal, 2)}}</el-col>
      <el-col :span="6">盈亏零售金额(元)：{{formatMoney(profitLossSales, 2)}}</el-col>
    </el-row>
    <div class="detail-title">
      <el-divider direction="vertical"></el-divider>
      <span>商品明细</span>
    </div>
    <el-table v-if="data.length" :data="data" :height="400">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="药品名称" prop="drugName"></el-table-column>
      <el-table-column label="生产厂商" prop="drugManufactor"></el-table-column>
      
      <template v-if="zyyp">
        <el-table-column label="库存(g)" prop="stock"></el-table-column>
        <el-table-column label="库存(kg)" prop="stock2">
          <template slot-scope="{row}">{{ toKg(row.stock) }}</template>
        </el-table-column>
        <el-table-column label="盘点实际库存(g)" prop="stockReal"></el-table-column>
        <el-table-column label="盘点实际库存(kg)" prop="stockReal2">
          <template slot-scope="{row}">
            <template v-if="status === 0">
              <column-click-edit
                @change="onChangeStockReal"
                :value="row.stockReal2"
                :row="row"
              />
            </template>
            <template v-else>{{ row.stockReal2 }}</template>
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column label="库存" prop="stock"></el-table-column>
        <el-table-column label="盘点实际库存" prop="stockReal">
          <template slot-scope="{row}">
            <template v-if="status === 0">
              <column-click-edit
                @change="onChangeStockReal"
                :value="row.stockReal"
                :row="row"
              />
            </template>
            <template v-else>{{ row.stockReal }}</template>
          </template>
        </el-table-column>
      </template>

      <el-table-column label="盈亏数量" prop="profitLossNum" :sortable="true">
        <template v-slot="slot">
          <span style="color: rgb(255, 132, 50);">{{slot.row.profitLossNum}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="盈亏数量" prop="profitLossNum"></el-table-column> -->
      <el-table-column label="盈亏成本金额" prop="profitLossPrincipal">
        <template slot-scope="scope">{{ formatMoney(scope.row.profitLossPrincipal, 2) }}</template>
      </el-table-column>
      <el-table-column label="盈亏零售金额" prop="profitLossSales">
        <template slot-scope="scope">{{ formatMoney(scope.row.profitLossSales, 2) }}</template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 10px;">
      <template v-if="status === 1">
        <el-button type="primary" @click="onImport">导出盘点单</el-button>
      </template>
      <template v-if="status === 0">
        <el-button
          v-loading="submitLoading"
          @click="onConfirm"
          type="primary"
        >提交</el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { getDetail,downloadDetail, examine } from '@/api/storageRoom/drugInventory';
import columnClickEdit from '@/components/ColumnClickEdit';
import { formatMoney } from "@/utils/index";

export default {
  name: "inventoryDetail",
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  components: { 
    columnClickEdit
  },
  data() {
    return {
      data: [],
      inventoryId: null,
      inventoryNo: null,
      createTime: null,
      createUserName: null,
      profitLossNum: null,
      profitLossPrincipal: null,
      profitLossSales: null,
      submitLoading: false,
      status: null,
      zyyp: false, // 盘点的药品存在饮片
    };
  },
  mounted() {
    this.refresh();
  },
  methods: {
    formatMoney,
    onImport() {
      downloadDetail(this.id);
    },
    onChangeStockReal({row, value}) {
      let number = parseFloat(value);
      if(isNaN(number)) {
        number = row.stockReal2 || row.stockReal;
      }
      number = this.toKg(number * 1000); // 保留三位小数
      if(row.drugType === 1) {
        row.stockReal2 = number;
        row.stockReal = number * 1000;
      } else {
        row.stockReal = number;
      }
      this.onExamine(0);
      // 计算盈亏数量
      // row.profitLossNum = row.stockReal - row.stock;
      // let profitLossNum = 0;
      // this.data.forEach(item => {
      //   profitLossNum += item.profitLossNum;
      // });
      // this.profitLossNum = profitLossNum;
    },
    onConfirm() {
      this.$confirm('确认提交本次盘点？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.onExamine(1);
      });
    },
    onExamine(status) {
      let data = {
        id: this.inventoryId,
        details: [],
        status
      };

      this.data.forEach(item => {
        data.details.push({
          stockReal: item.stockReal2 || item.stockReal,
          id: item.id,
        });
      });

      this.submitLoading = true;
      examine(data).then(() => {
        this.submitLoading = false;
        this.$emit("success", status === 1);
        if(status === 0) {
          // 编辑后刷新页面
          this.refresh();
        }
      }).catch(err => {
        console.error(err);
        this.submitLoading = false;
      });
    },
    toKg(value) {
      let num = value / 1000;
      return Math.round((num) * 1000) / 1000;
    },
    refresh() {
      getDetail(this.id).then(res => {
        this.inventoryId = res.id;
        this.inventoryNo = res.inventoryNo;
        this.createTime = res.createTime;
        this.createUserName = res.createUserName;
        this.profitLossNum = res.profitLossNum;
        this.profitLossPrincipal = res.profitLossPrincipal;
        this.profitLossSales = res.profitLossSales;
        this.status = res.status;
        let data = res.list;
        data.forEach(item => {
          if(item.drugType === 1) {
            // 盘点实际库存 kg单位
            this.zyyp = true;
            item.stockReal2 = this.toKg(item.stockReal);
          }
        });
        this.data = data;
      });
    }
  }
}
</script>

<style>
.inventory-detail .detail-title {
  align-items: center;
  font-weight: bold;
  color: #1881dd;
  font-size: 15px;
  display: flex;
}

.inventory-detail .detail-title .el-divider {
  background-color: #1881dd;
  border-radius: 5px;
  width: 5px;
}

.inventory-detail .el-row {
  padding: 15px 10px;
}

.inventory-detail .el-row.no-row-span {
  padding-bottom: 0;
}
</style>